import React, {Component} from 'react';
import {Text, View, TextInput, Image, TouchableHighlight, StyleSheet, StatusBar, SafeAreaView, TouchableWithoutFeedback} from 'react-native';
// import { Toast, Provider } from '@ant-design/react-native'
import AntDesign from 'react-native-vector-icons/AntDesign';
import storage from '../../util/storage';
import theme from '../../util/theme';
import BSafeAreaViewPlugs from '../../baseUI/b-safe-area-view-plus/index'
import BNavigationBar from '../../baseUI/b-navigation-bar/index'
import AccountAPI from '../../api/account'
import { CheckBox } from 'react-native-elements'
import router from '../../util/router'
// import { TouchableHighlight } from 'react-native-gesture-handler';

/**
 * @description 登陆页面
 */
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '1056834607@qq.com',
      password: '199389',
      isLogin: true,
      isRegister: false,
      userInfo: null,
      borderColor1: '#eff0f6',
      borderColor2: '#eff0f6',
      borderColor: '#eff0f6',
      borderColorHint: '#333',
      privacyChecked: true
    };
  }

  doLogin = () => {
      AccountAPI.login({
        email: this.state.email,
        password: this.state.password
      })
      .then(res => {
        storage.setItem('userInfo', res.data);
        this.setState({userInfo: res.data});
        this.props.route.params && this.props.route.params.success && this.props.route.params.success(res.data)
        this.props.navigation.goBack()
        // Toast.success('登录成功', 1, () => {
        //   this.props.navigation.goBack()
        // });
      })
      .catch(error => {
        console.log(error)
        // Toast.success('登录失败');
      })
  };

  handleSubmit = () => {
    this.doLogin()
  };

  render() {
    const { isLogin } = this.state;
    const { navigation } = this.props;
    const FormBox = (
      <View style={styles.formBox}>
        <View style={{...styles.inputItem, borderColor: this.state.borderColor1}}>
          <TextInput
            style={styles.input}
            onChangeText={(email) => this.setState({email})}
            value={this.state.email}
            placeholder="输入登录户名"
            onFocus={() => {this.setState({borderColor1: this.state.borderColorHint})}}
            onBlur={() => {this.setState({borderColor1: this.state.borderColor})}}
          />
        </View>
        <View style={{...styles.inputItem, borderColor: this.state.borderColor2}}>
          <TextInput style={{...styles.input}}
            onChangeText={(password) => this.setState({password})}
            value={this.state.password}
            placeholder="输入登录密码"
            secureTextEntry={true}
            onFocus={() => {this.setState({borderColor2: this.state.borderColorHint})}}
            onBlur={() => {this.setState({borderColor2: this.state.borderColor})}}/>
        </View>
        <View style={{marginTop: 20}}>
          <TouchableWithoutFeedback onPress={() => this.handleSubmit()}>
            <Text style={styles.loginBtn}>{isLogin ? '立即登录' : '立即注册'}</Text>
          </TouchableWithoutFeedback>
        </View>
        <View style={styles.bwtWrapper}>
          <View style={styles.tipWrapper}>
            <Text style={{ color: '#999' }}>{isLogin ? '没有账户？' : '已有账户？'}</Text>
            <TouchableWithoutFeedback onPress={() => {this.setState({isLogin: !isLogin})}}>
              <Text >{isLogin ? '注册' : '登录'}</Text>
            </TouchableWithoutFeedback>
          </View>
        </View>
      </View>
    );
    const small_btn_stl = {
      fontSize: 12,
      color: '#888'
    }
    return (
      <BSafeAreaViewPlugs style={styles.container} topInset={false}>
        <StatusBar backgroundColor="#fff" barStyle="dark-content" translucent={true} />
        <AntDesign style={styles.btn_close} name="arrowleft" size={24}
          onPress={()=>navigation.goBack()}
        />
        <View style={styles.cardBox}>
          <Text style={{ fontSize: 24, fontWeight: '700', marginTop: 80 }}>蚂蚁任务</Text>
        </View>
        { FormBox }
        <View style={{
          position:'absolute',
          bottom: '20%',
          width: '100%'
        }}>
          <View style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            textAlign: 'center',
          }}>
            <CheckBox
            containerStyle={{
              margin: 0,
              padding: 0,
              marginRight: 4
            }}
            center
            checkedColor="#615963"
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
              checked={this.state.privacyChecked}
              onPress={(v) => {
                this.setState({
                  privacyChecked: !this.state.privacyChecked
                })
              }}
            />
            <Text style={small_btn_stl}>阅读并同意</Text>
            <TouchableWithoutFeedback onPress={() => {
              console.log(1111)
              router.goPrivacy({ navigation: this.props.navigation })
            }}>
              <Text style={small_btn_stl}>《用户协议》</Text>
            </TouchableWithoutFeedback>
            <Text style={small_btn_stl}>和</Text>
            <TouchableWithoutFeedback onPress={() => {
              router.goProtocol({ navigation: this.props.navigation })
            }}>
              <Text style={small_btn_stl}>《隐私政策》</Text>
            </TouchableWithoutFeedback>
          </View>
        </View>
      </BSafeAreaViewPlugs>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1,
    backgroundColor: '#f5f5f5',
    // backgroundColor: 'blue'
  },
  btn_close: {
    zIndex: 5,
    position: 'absolute',
    left: 10,
    top: 50,
    color: theme.primaryColor,
    width: 30,
    height: 30,
    // backgroundColor: 'red'
  },
  cardBox: {
    display: 'flex',
    alignItems: 'center',
    height: 140,
  },
  logo: {
    width: 98,
    height: 98,
    borderRadius: 49,
    marginTop: 60
  },
  formBox: {
    paddingVertical: 10,
    paddingBottom: 20,
    paddingHorizontal: 20,
    marginHorizontal: 18,
    backgroundColor: '#fff',
    borderRadius: 8
  },
  inputItem: {
    paddingLeft: 0,
    paddingRight: 0,
    marginBottom: 20,
    borderBottomWidth: 1
  },
  input: {
    height: 44,
    paddingVertical: 4
  },
  loginBtn: {
    fontSize: 16,
    height: 44,
    lineHeight: 44,
    marginBottom: 10,
    color: '#fff',
    textAlign: 'center',
    borderRadius: 2,
    backgroundColor: theme.primaryColor
  },
  tipWrapper: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row'
  },
  bwtWrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 12
  }
})